<script setup>
  import NcInput from './components/NcInput.vue';
  import NcSelect from './components/NcSelect.vue';
  const attrs = useAttrs();
  const props = defineProps({
    /**
     * 表单的数据信息
     *
     */
    formData: {
      type: Object,
      default: () => ({})
    },
    /**
     * 表单的配置信息
     *
     */
    formColumns: {
      type: Array,
      default: () => []
    },
    formRules: {
      type: Object,
      default: () => {}
    },
    // el-row的所有属性
    rowOpts: {
      type: Object,
      default: () => {}
    }
  });
  const componentsTypes = {
    input: NcInput,
    select: NcSelect
  };
  const formRef = ref();
  defineExpose({
    formRef
  });
</script>

<template>
  <div>
    <NstdForm v-bind="attrs" :ref="(el) => (formRef = el)" :model="props.formData" :rules="props.formRules">
      <NstdRow v-bind="props.rowOpts">
        <NstdCol v-for="(column, index) in props.formColumns" v-bind="column.colOpts" :key="column.prop" :index="index">
          <NstdFormItem v-bind="column.formItemOpts" :label="column.label" :prop="column.prop">
            <!-- eslint-disable vue/no-mutating-props -->
            <component :is="componentsTypes[column.type]" v-bind="column" v-model="props.formData[column.prop]"
          /></NstdFormItem>
        </NstdCol>
      </NstdRow>
    </NstdForm>
  </div>
</template>

<style scoped lang="scss"></style>
